<template>
  <div class="wrapper">
    <span class="icon" :style="bg">
      <icon-svg :iconClass="currentLottery.icon"></icon-svg>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: '重庆时时彩'
    },
    size: {
      type: Object,
      default: function() {
        return {
          width: 25,
          height: 25,
          fontSize: 22
        }
      }
    }
  },
  data() {
    return {
      lotteryIconData: [
        {
          id: 1,
          type: '重庆时时彩',
          bg: require('@/assets/imgs/caizhong_bj_01.svg'),
          icon: 'iconicon_chongqingshishi'
        },
        {
          id: 2,
          type: '急速时时彩',
          bg: require('@/assets/imgs/caizhong_bj_01.svg'),
          icon: 'iconicon_jisushishicai'
        },
        {
          id: 3,
          type: '天津时时彩',
          bg: require('@/assets/imgs/caizhong_bj_02.svg'),
          icon: 'iconicon_tianjinshishica'
        },
        {
          id: 4,
          type: '新疆时时彩',
          bg: require('@/assets/imgs/caizhong_bj_04.svg'),
          icon: 'iconicon_xinjiangshishic'
        },
        {
          id: 5,
          type: '山东11选5',
          icon: 'iconicon_shandongxuan',
          bg: require('@/assets/imgs/caizhong_bj_03.svg'),
        },
        {
          id: 6,
          type: '广东11选5',
          icon: 'iconicon_guangdongxuan',
          bg: require('@/assets/imgs/caizhong_bj_04.svg'),
        },
        {
          id: 7,
          type: '急速11选5',
          bg: require('@/assets/imgs/caizhong_bj_01.svg'),
          icon: 'iconCZ_Icon_jisuxuan'
        },
        {
          id: 8,
          type: '幸运快三',
          icon: 'iconLy_kuai_xingyun',
          bg: require('@/assets/imgs/caizhong_bj_01.svg'),
        },
        {
          id: 9,
          type: '安徽快三',
          bg: require('@/assets/imgs/caizhong_bj_04.svg'),
          icon: 'iconicon_anhuikuaisan'
        },
        {
          id: 10,
          type: '甘肃快三',
          bg: require('@/assets/imgs/caizhong_bj_08.svg'),
          icon: 'iconLy_kuai_gansu'
        },
        {
          id: 11,
          type: '广西快三',
          bg: require('@/assets/imgs/caizhong_bj_07.svg'),
          icon: 'iconLy_kuai_guangxi'
        },
        {
          id: 12,
          type: '贵州快三',
          bg: require('@/assets/imgs/caizhong_bj_06.svg'),
          icon: 'iconLy_kuai_guizhou'
        },
        {
          id: 13,
          type: '湖北快三',
          bg: require('@/assets/imgs/caizhong_bj_05.svg'),
          icon: 'iconLy_kuai_hubei'
        },
        {
          id: 14,
          type: '北京赛车',
          bg: require('@/assets/imgs/caizhong_bj_06.svg'),
          icon: 'iconicon_jisupk'
        },
        {
          id: 15,
          type: '幸运飞艇',
          bg: require('@/assets/imgs/caizhong_bj_02.svg'),
          icon: 'iconCZ_Icon_xingyunfeiti'
        },
        {
          id: 16,
          type: '极速赛车',
          bg: require('@/assets/imgs/caizhong_bj_01.svg'),
          icon: 'iconCZ_Icon_beijingsaich'
        },
        {
          id: 17,
          type: '极速飞艇',
          bg: require('@/assets/imgs/caizhong_bj_02.svg'),
          icon: ''
        },
        {
          id: 18,
          type: '北京28',
          bg: require('@/assets/imgs/caizhong_bj_02.svg'),
          icon: 'iconly_jianada'
        },
        {
          id: 19,
          type: '幸运28',
          bg: require('@/assets/imgs/caizhong_bj_01.svg'),
          icon: 'iconly_jianada'
        },
        {
          id: 20,
          type: '香港六合彩',
          bg: require('@/assets/imgs/caizhong_bj_03.svg'),
          icon: 'iconicon_xiangganghecai'
        },
        {
          id: 21,
          type: '急速六合彩',
          bg: require('@/assets/imgs/caizhong_bj_02.svg'),
          icon: 'iconCZ_Icon_jisuhecai'
        },
        {
          id: 22,
          type: '十分六合彩',
          bg: require('@/assets/imgs/caizhong_bj_01.svg'),
          icon: 'iconLy_hecai_shifen'
        },
          {
          id: 23,
          type: '福彩3d',
          bg: require('@/assets/imgs/caizhong_bj_01.svg'),
          icon: 'iconCZ_Icon_jisufucaiD'
        },
        {
          id: 24,
          type: '排列三',
          bg: require('@/assets/imgs/caizhong_bj_02.svg'),
          icon: 'iconicon_pailiesan'
        },
        {
          id: 25,
          type: '极速福彩3d',
          bg: require('@/assets/imgs/caizhong_bj_03.svg'),
          icon: 'iconCZ_Icon_jisufucaiD'
        },
        {
          id: 26,
          type: '腾讯分分彩',
          bg: require('@/assets/imgs/caizhong_bj_04.svg'),
          icon: 'iconly_shishicai_tengxun'
        },
        {
          id: 27,
          type: '日本1.5分彩',
          bg: require('@/assets/imgs/caizhong_bj_04.svg'),
          icon: 'iconicon_ribenydwfencai',
          
        }
      ]
    }
  },
  methods: {

  },
  computed: {
    currentLottery() {
      let ret = {}
      this.lotteryIconData.some(item => {
        if (item.type == this.name) {
          ret = item
        }
      })
      return ret
    },
    bg() {
      return `background: url(${this.currentLottery.bg}) no-repeat center / cover`
    },
   
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper 
    .icon 
      display flex 
      align-items center 
      justify-content center
      width 25px 
      height 25px
      border-radius 50%
      box-sizing border-box
      font-size 22px
</style>